<div class="events-info" >
  <div class="panel-heading clearfix">

  </div>
  <div class="panel-body">
    <form class="form-horizontal" role="form"
          ng-class="{'form-group-sm': ($storage.displayDensity === pipelineConstant.DENSITY_COZY || $storage.displayDensity === pipelineConstant.DENSITY_COMPACT)}"
          name="events-info">

      <div class="alert alert-info alert-dismissible" role="alert"
           ng-show="!detailPaneConfig.eventLanes || detailPaneConfig.eventLanes.length === 0">
        To use events generated by this stage, select the Produce Events property on the Configuration > General tab.
        For more information about using events, see “Dataflow Triggers” in the online help.”
      </div>

      <table class="table table-hover">
        <thead>
        <tr>
          <th class="expand-col">
              <span class="pointer toggler {{expandAll ? 'open' : ''}}"
                    ng-click="expandAll = !expandAll"></span>
          </th>
          <th class="alert-text-col">Event Type (sdc.event.type)</th>
          <th class="id-col">Description</th>
        </tr>
        </thead>
        <tbody ng-hide="showLoading">

        <tr ng-repeat-start="eventDefn in detailPaneConfigDefn.events track by $index"
            ng-init="isOpen=false;"
            ng-click="isOpen = !isOpen"
            class="pointer">

          <td>
            <span class="toggler {{isOpen || expandAll ? 'open' : ''}}"
                  ng-click="isOpen = !isOpen; $event.stopPropagation()"></span>
          </td>

          <td>{{eventDefn.type}}</td>

          <td>{{eventDefn.description}}</td>

        </tr>

        <tr ng-repeat-end ng-if="isOpen || expandAll" class="expand-row">
          <td colspan="3">
            <table class="table fields-table">
              <caption>Event Record Fields:</caption>
              <thead>
                <tr>
                  <th>Field Name</th>
                  <th>Description</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="eventField in eventDefn.fields track by $index">
                  <td>{{eventField.name}}</td>
                  <td>{{eventField.description}}</td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>

        <tr ng-if="!detailPaneConfigDefn.events || detailPaneConfigDefn.events.length === 0">
          <td colspan="3" class="no-records text-center">No Events.</td>
        </tr>

        </tbody>
      </table>

      <div show-loading="showLoading"></div>

    </form>

  </div>
</div>

